﻿
@{ Html.Telerik().TreeView()
    .Name("TreeView")
    .HtmlAttributes(new { style = "width: 300px; float: left; margin-bottom: 30px;" })
    .Items(treeViewItem =>
	{
		treeViewItem.Add().Text("UI Components")
			.Items(item =>
			{
				item.Add().Text("ASP.NET WebForms");
				item.Add().Text("Silverlight");
				item.Add().Text("ASP.NET MVC");
				item.Add().Text("WinForms");
				item.Add().Text("WPF");
			})
			.Expanded(true);

		treeViewItem.Add().Text("Data")
			.Items(item =>
			{
				item.Add().Text("OpenAccess ORM");
				item.Add().Text("Reporting");
			});

		treeViewItem.Add().Text("TFS Tools")
			.Items(item =>
			{
				item.Add().Text("Work Item Manager");
				item.Add().Text("Project Dashboard");
			});

		treeViewItem.Add().Text("Automated Testing")
			.Items(item =>
			{
				item.Add().Text("Web Testing Tools");
			});

		treeViewItem.Add().Text("ASP.NET CMS")
			.Items(item =>
			{
				item.Add().Text("Sitefinity CMS");
			});
	})
	.Render(); }
	
@using (Html.Configurator("Client API").Begin()) { 
    <p>
        <label for="itemIndex">Item index:</label>
        @Html.TextBox("itemIndex", "0", new { style = "width: 40px" })
    </p>
    
    <p>
        <button onclick="ExpandItem()" class="t-button t-state-default">Expand</button> / <button onclick="CollpaseItem()" class="t-button t-state-default">Collapse</button>
		<br />
        <button onclick="EnableItem()" class="t-button t-state-default">Enable</button> / <button onclick="DisableItem()" class="t-button t-state-default">Disable</button>
    </p>
 } 
        
<script type="text/javascript">
		
	function ExpandItem() {
	    var treeView = $("#TreeView").data("tTreeView");
	    var item = $("> ul > li", treeView.element)[$("#itemIndex").val()];
	        
	    treeView.expand(item);
	}

	function CollpaseItem() {
	    var treeView = $("#TreeView").data("tTreeView");
	    var item = $("> ul > li", treeView.element)[$("#itemIndex").val()];
	        
	    treeView.collapse(item);
	}

	function EnableItem() {
	    var treeView = $("#TreeView").data("tTreeView");
	    var item = $("> ul > li", treeView.element)[$("#itemIndex").val()];
	        
	    treeView.enable(item);
	}

	function DisableItem() {
	    var treeView = $("#TreeView").data("tTreeView");
	    var item = $("> ul > li", treeView.element)[$("#itemIndex").val()];

	    treeView.disable(item);
	}
</script>
			
@section HeadContent {

    <style type="text/css">
		
	    .example .configurator
	    {
	        width: 300px;
	        float: left;
	        margin: 0 0 0 10em;
	        display: inline;
	    }
	    
	    .configurator p
	    {
	        margin: 0;
	        padding: .4em 0;
	    }
	    
	    .configurator .t-button
        {
            display:inline-block;
            width:auto;
        }

    </style>

}
